<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" class="demo-form-inline queryFrom">
          <el-form-item label="试验名称">
            <el-input v-model="trialName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="试验类型">
            <el-select v-model="trialType" clearable placeholder="请选择">
              <el-option :label="item.codeName" :value="item.codeName" v-for="(item,index) in optionsList" :key="index"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新 增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <testhttb @deleteSelectData="deleteSelectData" ref="httbRef" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="项目名称" prop="trialName">
          <el-input v-model="ruleForm['trialName']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="试验日期" prop="trialTime">
          <el-date-picker
            v-model="ruleForm['trialTime']"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择试验日期"
          />
        </el-form-item>
        <el-form-item label="试验类型" prop="trialType">
          <el-select v-model="ruleForm['trialType']" clearable placeholder="请选择">
            <el-option :label="item.codeName" :value="item.codeName" v-for="(item,index) in optionsList" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="任务书号" prop="taskNumber">
          <el-input v-model="ruleForm['taskNumber']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm['remark']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="试验状态" prop="trialState">
          <el-radio-group v-model="ruleForm['trialState']">
            <el-radio label="0">等待试验</el-radio>
            <el-radio label="1">试验中</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getInfoPageList, addInfoInsert, updateInfoUpdate,infoRemove,codeManagelistByCodeMain } from '@/api/home_/experiment'

import experiment from '@/mixins/experiment'
export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      optionsList:[],
      title: '新增',
      rules: {},
      ruleForm: {
        'remark': '',
        'trialState': '',
        'taskNumber': '',
        'trialName': '',
        'trialTime': '',
        'trialType': ''
      },
      dialogTableVisible: false,
      fromLabelObj: [
        {
          type: 'input',
          disable: false,
          label: '特效名称',
          required: true,
          prop: 'name',
          key: 'name',
          rules: [
            { required: true, message: '请输入特效名称', trigger: ['blur', 'change'] }
          ]
        },
        {
          label: '特效类型',
          disable: false,
          required: false,
          type: 'select',
          key: 'type',
          prop: 'type',
          options: [{ value: 1, label: '哈哈哈' }]
        },
        {
          required: false,
          label: '特效地址',
          disable: false,
          type: 'input',
          key: 'address',
          prop: 'address'
        },
        {
          label: '备注',
          required: false,
          type: 'textarea',
          disable: false,
          key: 'remark',
          prop: 'remark'
        },
        {
          required: false,
          label: '特效图片',
          disable: false,
          type: 'uploade',
          key: 'image',
          prop: 'image'
        },
        {
          label: '状态',
          required: false,
          disable: false,
          type: 'status',
          key: 'status',
          prop: 'status'
        }

      ],
      depList: [],
      userId: '',
      trialType: '',
      trialName: '',
      tableUserData: [],
      tabUserList: [
        {
          key: 'trialType',
          title: '试验类型'
        },
        {
          key: 'trialName',
          title: '试验名称'
        },
        {
          key: 'taskNumber',
          title: '任务书号'
        },
        {
          key: 'trialTime',
          title: '试验日期'
        },
        {
          key: 'trialState',
          title: '状态'
        },
        {
          key: 'remark',
          title: '备注'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {
    codeManagelistByCodeMain("trial_type").then(res=>{
      this.optionsList = res.data
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    deleteSelectData(v) {
      infoRemove({ ids: [v.trialId] }).then(res => {
        if (res.code == 200) {
          this.getUserList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    commitFromData() {
      if (this.ruleForm.hasOwnProperty('id')) {
        updateInfoUpdate(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        addInfoInsert(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },

    // 获取用户列表
    getUserList() {
      this.dialogTableVisible = false
      getInfoPageList({
        data: {
          'trialName': this.trialName,
          'trialType': this.trialType
        },
        'size': this.size,
        'current': this.page
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .el-select, .el-date-editor{
    width:100%;
  }
    .timing{
      background:#fff;
      padding:20px;
    }
    .autoClass{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
      .el-form-item{
          width:50%;
      }
    }
  </style>
